<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>皓轩旅游集团</title>
		<script src="bootstrap/js/jquery-3.5.1.slim.min.js"></script>
		<script src="bootstrap/js/bootstrap.js"></script>
		<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
	</head>
	<style>
		.qt{
			display: flex;
		}
		.tu{margin: 10px;}
		img{
			margin-right: 170px;
		}
		h4{
			color: black;
			letter-spacing: 5px;
			font-size: 20px;
		}
		a:hover{
			text-decoration: none;
		}
	</style>
	<body>
		<!-- 导航栏 -->
		<nav class="navbar navbar-expand-sm navbar-dark" style="background-color: darkseagreen;">
			<a class="navbar-brand" href="#"><img src="images/logo.png" width="150px"></a>
			<ul class="navbar-nav">
				<p>                              </p>
				<li class="nav-item">
					<a class="nav-link" href="index.html"><h2>主页</h2></a>
				</li>
				
				<p>                              </p>
				<li class="nav-item">
					<a class="nav-link" href="demo01.html"><h2>旅行计划</h2></a>
				</li>
				<p>                              </p>
				<li class="nav-item">
					<a class="nav-link" href="demo02.html"><h2>酒店</h2></a>
				</li>
				<p>                              </p>
				<li class="nav-item">
					<a class="nav-link" href="demo03.html"><h2>关于</h2></a>
				</li>
				<p>                              </p>
				<li class="nav-item">
					<a class="nav-link" href="demo04.html"><h2>游轮</h2></a>
				</li>
				<p>                              </p>
				<li class="nav-item">
					<a class="nav-link" href="#"><h2>客服联系</h2></a>
				</li>
			</ul>
		<form class="form-inline ml-auto">
			<input class="form-control" type="search" placeholder="搜索目的地" aria-label="search">
			<button class="btn btn-danger my-2 my-sm-0" type="submit">搜索</button>
		</form>
		<form class="form-inline ml-auto my-2 my-lg-0 ml-3 ">
			<a href="#" class="mr-2" style="color: #000;">登录</a>
			<a href="#" class="mr-2" style="color: #000;">注册</a>
		</form>
		</nav>
		
		<nav class="navbar navbar-expand-sm" style="background-color: whitesmoke;" >
			<div class="navbar-nav container">
				<li class="nav-item">
					</br>
					<a class="nav-link"><h1>常用功能</h1></a>
					<nav style="background-color: white;">
						<div class="container">
						<div class="qt">
								<div class="tu">
							<a href="#">
							<img src="imagess/5.1.1.png"title="选座"  />
							<a href="#"><h4>&nbsp;&nbsp;选座</h4></a>	
							</div>
							</a>
							<div class="tu">
								<a href="#">
									<div >
								<img src="imagess/5.1.2.png"title="行李购买" /></div>
								<a href="#"><h4>行李购买</h4></a>
							</div>
						<div class="tu">
							<a href="#">
								<div >
							<img src="imagess/5.1.3.png"title="报销凭证"/></div>
							<a href="#"><h4>报销凭证</h4></a>
						</div>
						<div class="tu">
							<a href="#">
								<div >
							<img src="imagess/5.1.4.png"title="行程消息订阅" /></div>
							<a href="#"><h4>行程消息订阅</h4></a>
						</div>
						</div>
					</nav>
					</br>
					<a class="nav-link"><h1>客票服务</h1></a>
					<nav style="background-color: white;">
						<div class="container">
						<div class="qt">
								<div class="tu">
							<a href="#">
							<img src="imagess/5.2.1.png"title="机票退改"  />
							<a href="#"><h4> 机票退改</h4></a>	
							</div>
							</a>
							<div class="tu">
								<a href="#">
									<div >
								<img src="imagess/5.2.2.png"title="查找订单" /></div>
								<a href="#"><h4>查找订单</h4></a>
							</div>
						<div class="tu">
							<a href="#">
								<div >
							<img src="imagess/5.2.3.png"title="退改计算器"/></div>
							<a href="#"><h4>退改计算器</h4></a>
						</div>
						<div class="tu">
							<a href="#">
								<div >
							<img src="imagess/5.2.4.png"title="机票信息修改" /></div>
							<a href="#"><h4>机票信息修改</h4></a>
						</div>
						</div>
						<div class="qt">
								<div class="tu">
							<a href="#">
							<img src="imagess/5.2.5.png"title="客票验真"  />
							<a href="#"><h4> 客票验真</h4></a>	
							</div>
							</a>
							<div class="tu">
								<a href="#">
									<div >
								<img src="imagess/5.2.6.png"title="国际行程确认" /></div>
								<a href="#"><h4>国际行程确认</h4></a>
							</div>
					</nav>
					</br>
					<a class="nav-link"><h1>出行服务</h1></a>
					<nav style="background-color: white;">
						<div class="container">
						<div class="qt">
								<div class="tu">
							<a href="#">
							<img src="imagess/5.3.1.png"title="签证办理"  />
							<a href="#"><h4>签证办理</h4></a>	
							</div>
							</a>
							<div class="tu">
								<a href="#">
									<div >
								<img src="imagess/5.3.2.png"title="卡券绑定" /></div>
								<a href="#"><h4>卡券绑定</h4></a>
							</div>
						<div class="tu">
							<a href="#">
								<div >
							<img src="imagess/5.3.3.png"title="升尊享飞"/></div>
							<a href="#"><h4>升尊享飞</h4></a>
						</div>
						<div class="tu">
							<a href="#">
								<div >
							<img src="imagess/5.3.4.png"title="网上值机" /></div>
							<a href="#"><h4>网上值机</h4></a>
						</div>
						</div>
						<div class="qt">
								<div class="tu">
							<a href="#">
							<img src="imagess/5.3.5.png"title="机上餐饮"  />
							<a href="#"><h4>机上餐饮</h4></a>	
							</div>
							</a>
							<div class="tu">
								<a href="#">
									<div >
								<img src="imagess/5.3.6.png"title="保险" /></div>
								<a href="#"><h4>保险</h4></a>
							</div>
						<div class="tu">
							<a href="#">
								<div >
							<img src="imagess/5.3.7.png"title="补订儿童"/></div>
							<a href="#"><h4>补订儿童</h4></a>
						</div>
						<div class="tu">
							<a href="#">
								<div >
							<img src="imagess/5.3.8.png"title="机上WiFi" /></div>
							<a href="#"><h4>机上WiFi</h4></a>
						</div>
						</div>
						<div class="qt">
								<div class="tu">
							<a href="#">
							<img src="imagess/5.3.9.png"title="临时乘机证明"  />
							<a href="#"><h4>临时乘机证明</h4></a>	
							</div>
							</a>
							<div class="tu">
								<a href="#">
									<div >
								<img src="imagess/5.3.10.png"title="延误/取消证明" /></div>
								<a href="#"><h4>延误/取消证明</h4></a>
							</div>
							<div class="tu">
								<a href="#">
									<div >
								<img src="imagess/5.3.11.png"title="航班动态" /></div>
								<a href="#"><h4>航班动态</h4></a>
					</nav>
					</br>
					<a class="nav-link"><h1>特殊旅客</h1></a>
					<nav style="background-color: white;">
						<div class="container">
						<div class="qt">
								<div class="tu">
							<a href="#">
							<img src="imagess/5.4.1.png"title="特殊旅客服务申请"  />
							<a href="#"><h4>特殊旅客服务申请</h4></a>	
							</div>
							</a>
							<div class="tu">
								<a href="#">
									<div >
								<img src="imagess/5.4.2.png"title="军警残购票" /></div>
								<a href="#"><h4>军警残购票</h4></a>
							</div>
							</nav>
					</br>
					<a class="nav-link"><h1>售后服务</h1></a>
					<nav style="background-color: white;">
						<div class="container">
						<div class="qt">
								<div class="tu">
							<a href="#">
							<img src="imagess/5.5.1.png"title="特殊旅客服务申请"  />
							<a href="#"><h4>特殊旅客服务申请</h4></a>	
							</div>
							</a>
							<div class="tu">
								<a href="#">
									<div >
								<img src="imagess/5.5.2.png"title="军警残购票" /></div>
								<a href="#"><h4>军警残购票</h4></a>
							</div>
							</nav>
					</br>
					<a class="nav-link"><h1>会员服务</h1></a>
					<nav style="background-color: white;">
						<div class="container">
						<div class="qt">
								<div class="tu">
							<a href="#">
							<img src="imagess/5.6.1.png"title="绿翼会员申请"  />
							<a href="#"><h4>绿翼会员申请</h4></a>	
							</div>
							</a>
							<div class="tu">
								<a href="#">
									<div >
								<img src="imagess/5.6.2.png"title="密码找回" /></div>
								<a href="#"><h4>密码找回</h4></a>
							</div>
						<div class="tu">
							<a href="#">
								<div >
							<img src="imagess/5.6.3.png"title="绿翼会员权益"/></div>
							<a href="#"><h4>绿翼会员权益</h4></a>
						</div>
						<div class="tu">
							<a href="#">
								<div >
							<img src="imagess/5.6.4.png"title="邮件订阅" /></div>
							<a href="#"><h4>邮件订阅</h4></a>
						</div>
						</div>
						<div class="qt">
								<div class="tu">
							<a href="#">
							<img src="imagess/5.6.5.png"title="飞友群"  />
							<a href="#"><h4>飞友群</h4></a>	
							</div>
							</a>
							<div class="tu">
								<a href="#">
									<div >
								<img src="imagess/5.6.6.png"title="航班动态订阅" /></div>
								<a href="#"><h4>航班动态订阅</h4></a>
							</div>
					</nav>
					</br>
					<a class="nav-link"><h1>公告讯息</h1></a>
					<nav style="background-color: white;">
						<div class="container">
						<div class="qt">
								<div class="tu">
							<a href="#">
							<img src="imagess/5.7.1.png"title="保险验真"  />
							<a href="#"><h4>保险验真</h4></a>	
							</div>
							</a>
							<div class="tu">
								<a href="#">
									<div >
								<img src="imagess/5.7.2.png"title="出行须知" /></div>
								<a href="#"><h4>出行须知</h4></a>
							</div>
						<div class="tu">
							<a href="#">
								<div >
							<img src="imagess/5.7.3.png"title="国际航班计划"/></div>
							<a href="#"><h4>国际航班计划</h4></a>
						</div>
						<div class="tu">
							<a href="#">
								<div >
							<img src="imagess/5.7.4.png"title="延误指南" /></div>
							<a href="#"><h4>延误指南</h4></a>
						</div>
						</div>
						<div class="qt">
								<div class="tu">
							<a href="#">
							<img src="imagess/5.7.5.png"title="防疫政策"  />
							<a href="#"><h4>防疫政策</h4></a>	
							</div>
							</div>
					</nav>
					</br></br>
		
		</nav>
		</form>
	</body>
</html>              